<template>
    <div class="flex justify-center p-4">
        <div class="custom-tree-container">
            <p>
                <span>顶级父目录</span>
                <span style="margin-left: 20px;">
                    <a style="color: cornflowerblue;" @click="append()"> 添加子菜单 </a>
                </span>
            </p>
            <el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all
                :expand-on-click-node="false" :props="props">
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ data.title }}</span>
                        <span style="margin-left: 20px;">
                            <a v-if="data.id != 0" style="color: cornflowerblue;" @click="editItem(data)"> 编辑 </a>
                            <a v-if="data.menuType == 1" style="color: cornflowerblue;" @click="append(data)"> 添加子菜单
                            </a>
                            <a v-if="data.menuType == 2" style="color: cornflowerblue;" @click="append(data)"> 添加按钮 </a>
                            <a style="margin-left: 8px;color: red;" @click="remove(node, data)"> 删除 </a>
                        </span>
                    </span>
                </template>
            </el-tree>


            <el-dialog v-model="openDialog" :title="isAdd ? '添加菜单' : '编辑菜单'" width="50%">
                <el-form ref="ruleFormRef" :rules="rules" :model="menuItem" label-width="120px">
                    <el-form-item label="菜单名称" prop="title">
                        <el-input v-model="menuItem.title" />
                    </el-form-item>
                    <el-form-item v-if="menuItem.addType == 1" label="父级菜单" prop="parentId">
                        <el-select v-model="menuItem.parentId" placeholder="请选择">
                            <el-option v-for="item in parentMenus" :key="item.id" :label="item.title"
                                :value="parseInt(item.id)" />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-else label="父级菜单">
                        <el-input v-model="menuItem.parentName" disabled />
                        <!-- <el-text>{{ menuItem.parentName }}</el-text> -->
                    </el-form-item>
                    <el-form-item v-if="menuItem.addType == 1" label="菜单等级" prop="menuType">
                        <el-select v-model="menuItem.menuType" placeholder="请选择">
                            <el-option label="父级模块" :value="parseInt(1)" />
                            <el-option label="功能列表" :value="parseInt(2)" />
                            <el-option label="按钮" :value="parseInt(3)" />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-else label="菜单等级" prop="menuType">
                        <!-- <el-select v-model="menuItem.menuType" placeholder="请选择">
                            <el-option label="父级模块" :value="parseInt(1)" />
                            <el-option label="功能列表" :value="parseInt(2)" />
                            <el-option label="按钮" :value="parseInt(3)" />
                        </el-select> -->
                        <el-input v-model="menuItem.menuTypeName" disabled />
                    </el-form-item>
                    <el-form-item v-if="menuItem.menuType == 2" label="路由标识">
                        <el-input v-model="menuItem.menukey" />
                    </el-form-item>
                    <el-form-item v-if="menuItem.menuType == 2" label="菜单路由">
                        <el-input v-model="menuItem.path" />
                    </el-form-item>
                    <el-form-item v-if="menuItem.menuType == 2" label="接口地址">
                        <el-input v-model="menuItem.menuUrl" />
                    </el-form-item>
                    <el-form-item v-if="menuItem.menuType != 3" label="菜单图标">
                        <!-- <el-select v-model="menuItem.menuIcon" clearable placeholder="菜单图标">
                            <el-option v-for="item in icons" :key="item.icon_id" :label="concat('icon-', item.font_class)"
                                :value="concat('icon-',item.font_class)" />
                        </el-select> -->
                        <IconSelector v-model="menuItem.menuIcon" />
                        <!-- <p v-if="menuItem.menuIcon"><i :class="['iconfont', menuItem.menuIcon]"></i></p> -->
                    </el-form-item>
                    <el-form-item label="排序: 默认正序" prop="sortNum">
                        <el-input v-model="menuItem.sortNum" type="number" />
                    </el-form-item>
                    <el-form-item v-if="menuItem.menuType == 3" label="编号" prop="codeNo">
                        <el-input v-model="menuItem.codeNo" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="openDialog = false">取消</el-button>
                        <el-button type="primary" @click="save(ruleFormRef)">提交</el-button>
                    </span>
                </template>
            </el-dialog>


            <el-dialog v-model="isDel" title="操作提示" width="30%">
                <span>确定删除 {{ delItem.menuTitle }} ?</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="isDel = false">取消</el-button>
                        <el-button type="danger" @click="confirm">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>


<script setup>
import { ref } from 'vue';
import IconSelector from '@/components/IconSelector.vue';
import { ElMessage } from 'element-plus'
import { getMenus, delMenu, saveMenu } from '@/config/api';

const parentMenus = ref([])
const ruleFormRef = ref(null)
const checkSortNum = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('排序必填'))
    } else {
        if (value < 0 || value > 99) {
            callback(new Error('排序数值范围：0~99'))
        }
        callback()
    }
}
const rules = ref({
    title: [
        { required: true, message: '菜单名称必填', trigger: 'blur' },
        { min: 2, max: 10, message: '菜单名称长度为2~10个字符', trigger: 'blur' },
    ],
    parentId: [
        { required: true, message: '父级菜单必选', trigger: 'change' },
    ],
    menuType: [
        { required: true, message: '菜单等级必选', trigger: 'change' },
    ],
    // path: [
    //     { required: true, message: '菜单路由必填', trigger: 'blur'},
    // ],
    sortNum: [
        { required: true, message: '排序必填', trigger: 'blur' },
        { validator: checkSortNum, trigger: 'blur' },
    ]
})

const dataSource = ref([])
const props = {
    value: 'id',
    label: 'title',
    menuType: 'menuType',
    children: 'children',
}
const treeRef = ref(null);
const checkedKeys = ref([])
const getList = () => {
    const data = {
        kind: 0
    }
    getMenus(data).then(res => {
        if (res.code == 200) {
            dataSource.value = res.data
            let even = res.data.filter(function (item) {
                return item.menuType === 1;
            });
            parentMenus.value = even
            parentMenus.value.unshift({
                id: 0,
                title: '顶级父目录'
            })
        }
    })
}

// 打开对话框
const openDialog = ref(false)
// 编辑是否为新增
const isAdd = ref(false)
const menuItem = ref({})
const append = (data) => {
    console.log('data ==> {}', data);
    isAdd.value = true
    menuItem.value = {}
    if (data) {
        menuItem.value.parentId = data.id
        if (data.menuType == 1) {
            menuItem.value.menuType = 2
            menuItem.value.parentName = data.title
            menuItem.value.menuTypeName = '功能列表'
        }
        else if (data.menuType == 2) {
            menuItem.value.menuType = 3
            menuItem.value.parentName = data.title
            menuItem.value.menuTypeName = '按钮'
        }
    }
    else {
        menuItem.value.addType = 1
        menuItem.value.parentId = 0
    }
    menuItem.value.sortNum = 55
    openDialog.value = true
}
const editItem = (data) => {
    console.log('data ==> {}', data);
    isAdd.value = false
    menuItem.value = data
    if (data.menuType != 3){
        menuItem.value.addType = 1
    }
    else{
        menuItem.value.menuType = 3
        menuItem.value.parentName = data.parentName
        menuItem.value.menuTypeName = '按钮'
    }
    openDialog.value = true
}

const save = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            saveMenu(menuItem.value).then(res => {
                if (res.code == 200) {
                    openDialog.value = false
                    ElMessage.success(res.msg)
                    getList()
                }
                else {
                    ElMessage.error(res.msg)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const isDel = ref(false)
const delItem = ref({})
const remove = (node, data) => {
    isDel.value = true
    delItem.value.id = data.id
    delItem.value.menuTitle = data.title
}

const confirm = () => {
    isDel.value = false
    const data = {
        id: delItem.value.id
    }
    delMenu(data).then(res => {
        if (res.code == 200) {
            ElMessage.success(res.msg)
            getList()
        }
        else {
            ElMessage.error(res.msg)
        }
    })
}


getList()
</script>


<style scoped></style>